.EditPages{
    height: 100%;
    display:  flex;
    flex-direction: column;
    background-color: #f0f0f0;
    .Head{
        padding: 10px;
        box-sizing: border-box;
        box-shadow: 0px 0px 2px 2px #ccc;
        background-color: white;
        .HeadContainer{
            display: flex;
            align-items: center;
            .quickBox{
                flex: 1;
                text-align: center;
                .quickContainer{
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }
        }
    }
    .Container{
        flex: 1;
        display:  flex;
        padding: 10px;
        box-sizing: border-box;
        overflow: hidden;
        .Left, .Right{
            padding: 10px;
            box-sizing: border-box;
            width: 280px;
            height: 100%;
            background-color: white;
            box-shadow: 0px 0px 4px 4px #ccc;
            border-radius: 8px;
            overflow: scroll;
            &::-webkit-scrollbar{
                height: 0;
                width: 0;
            }
        }
        .Left{
            .Componentlib{
                .ComponentItem{
                    width: 100%;
                    padding: 20px 10px;
                    background-color: #f3f3f3;
                    box-sizing: border-box;
                    border: 1px solid transparent;
                    &:hover{
                        border: 1px solid #ccc;
                    }
                }
            }
            .LayerList{
               
                .layerItem{
                    cursor: pointer;
                    box-sizing: border-box;
                    padding: 4px 8px;
                    border-radius: 8px;
                    border: 1px solid transparent;
                    &.selected{
                        border: 1px solid #3f9ce7;
                    }
                    &:hover{
                        border: 1px solid #ccc;
                    }
                }
            }
        }
        .Middle{
            flex: 1;
            display: flex;
            justify-content: center;
            .CanvasWrapper{
                box-sizing: border-box;
                padding: 10px;
                width: 400px;
                height: 100%;
                background-color: white;
                box-shadow: 0px 0px 4px 4px #ccc;
                border-radius: 8px;
                overflow: scroll;
                &::-webkit-scrollbar{
                    width: 0;
                    height: 0;
                }
                .selctedBox{
                    border: 1px solid transparent;
                    box-sizing: border-box;
                    border-radius: 8px;
                    padding: 8px;
                    margin-bottom: 10px;
                    cursor: pointer;
                    &:hover{
                        border: 1px solid #eeecec;
                    }
                    &.isselect{
                        border: 1px solid rgb(97, 136, 207);
                    }
                    &.islock{
                        opacity: .5;
                        cursor: not-allowed;
                    }
                    .notouch{
                        pointer-events: none;
                    }
                }
            }
        }

    }
}